<template>
  <div>
    <pic></pic>
    <!-- 组件1 -->
    <search @searchfunparent="searchfunparent" @parenntopentdialog="parenntopentdialog" @exportexcel="exportexcel" />
    <!-- 组件2 -->
    <user :arr="arr" @resetpage="resethome" @deletesome="deletemore" @editone="editone" />
    <!-- 组件3 分页 -->
      <page @pagechange="pagechange" @changepageSize="changepageSize" :page="page" :pageSize="pageSize"
        :total="total" />
    


    <!-- 组件4 -->
    <alert @editfun="editfun" @cancelalert="cancelalert" :btnType="btnType" :row="row" v-if="show"
      @addonefun="addonefun" @closealert="closealert"></alert>
  </div>
</template>

<script>
  import search from "./components/search.vue";
  import user from "./components/user.vue";
  import alert from "./components/alert.vue";
  import page from "./components/page.vue";
  import pic from "./components/pic.vue";
  import {
    gethomeallapi,
    deleteoneapi,
    deletemoreapi,
    addoneapi,
    editoneapi
  } from "../../api/ljjApi";
  import {
    export_json_to_excel
  } from "./../../untial/Export2Excel";
  export default {
    data() {
      return {
        show: false,
        btnType: '0',
        arr: [],
        row: {},
        keyword: '',
        pageSizes: [20, 40, 60, 80, 100],
        pageSize: 20,
        total: 0,
        page: 1
      }
    },
    components: {
      search,
      user,
      alert,
      page,
      pic
    },
    mounted() {
      this.gethome()
    },



    methods: {
      gethome() {
        gethomeallapi({
          keyword: this.keyword,
          page: this.page,
          pageSize: this.pageSize
        }).then(res => {
          if (res.code == 200) {
               console.log('1111123',res.data)
            this.arr = res.data,
              this.total = res.total
          }
        })
      },

      closealert() {
        this.show = false
      },
      cancelalert() {
        this.closealert()
      },
      addonefun(val) {
        addoneapi(val).then(res => {
          // console.log('res12', res);
          if (res.code == 200) {
            this.gethome()
            this.closealert()
          }
        })
      },
      editfun(val) {
        editoneapi(val).then(res => {
          if (res.code == 200) {
            this.gethome()
            this.closealert()
          }
        })
      },
      editone(row) {
        this.row = row
        this.show = true
        this.btnType = 1
      },

      // 删除数据
      resethome(id) {
        deleteoneapi({
          id: id
        }).then(res => {
          if (res.code == 200) {
            this.arr = res.data
             this.total = res.total
          }
        })
      },

      //搜索某一条数据
      searchfunparent(val) {
        this.keyword = val
        this.gethome()
      },

      //分页
      changepageSize(val) {
        this.pageSize = val,
          this.gethome()
      },
      pagechange(val) {
        this.page = val,
          this.gethome()
      },

      //删除多条数据
      deletemore(ids) {
        deletemoreapi({
          ids: ids
        }).then(res => {
          if (res.code == 200) {
          this.arr = res.data
             this.total = res.total
          }
        })
      },

      //打开添加狂
      parenntopentdialog() {
        this.show = true
        this.row = {}
        this.btnType = 0
      },
      //导出excel
      formatJson(filterVal, jsonData) {
        return jsonData.map(v => filterVal.map(j => {
          return v[j]
        }))
      },
      exportexcel() {
        const tHeader = ['日期', '姓名', '地址', '消费金额', '订单数量', '会员等级']
        //自定义的字段
        const filterVal = ['date', 'name', 'address', 'money', 'count', 'type']
        gethomeallapi({
          keyword: '',
          page: 1,
          pageSize: 10000
        }).then(res => {
          if (res.code == 200) {
            //根据自定义字段 筛选我需要的值
            const data = this.formatJson(filterVal, res.data)
            export_json_to_excel({
              header: tHeader, //excel头部列表
              data, //数据
              filename: '用户信息', //文件名称
              autoWidth: true, //自适应宽
              bookType: 'xlsx' //文件类型
            })
          }
        })
      }




    },
  }
</script>

<style>

</style>